<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>确认订单</title>
    <!--css style-->
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="responsive/flexible.css">
    <script src="responsive/flexible.js"></script>
</head>
<body class="personal_center my_order settle">
    <header>
        <a href="javascript:void(0)" class="pre_page"></a>
        确认订单
    </header>

    <section>
       <div class="title">
           <div class="container">
               <h2>李佳玲 185****4455</h2>
               <p>上海浦东区联创国际2016室上海浦东区联创国际</p>

           </div>

       </div>
        <div class="settle_body">
            <form action="" class="o_cfm_form">
                <dl>
                    <dt>
                    <div class="container">
                        <a href="javascript:void(0)"> <img src="img/shop_icon.png" alt="爱迪蒙托家居旗舰店">
                            爱迪蒙托家居旗舰店</a>
                    </div>


                    </dt>
                    <dd class="container">
                        <div class="pic">
                            <a href="javascript:void(0)">
                                <img src="img/order_pic.jpg" alt="">
                            </a>
                        </div>
                        <div class="desc">
                            <p><a href="javascript:void(0)">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头
                                灯过道灯卧室客厅</a></p>
                            <span>欧式花，普通机械锁，黄铜材质</span>
                            <div class="price"><em>￥<strong>366.00</strong></em></div>
                            <i class="num">&times;1</i>
                        </div>
                    </dd>
                </dl>
                <div class="clear"></div>
                <div class="order_info">
                    <ul class="container">
                        <li onclick="showSendWay(1)">配送方式<span>快递费：￥10.00</span></li>
                        <li onclick="showCoupons(1)">店铺优惠<span>店铺优惠：满300-5</span></li>
                        <li>留言备注 <input type="text" placeholder="您的要求或者建议"></li>
                    </ul>
                    <h3>
                        共1件商品   小计：
                        <div class="price"><em>￥<strong>326.00</strong></em></div>
                    </h3>
                </div>
                <dl>
                    <dt>
                    <div class="container">
                        <a href="javascript:void(0)"> <img src="img/shop_icon.png" alt="爱迪蒙托家居旗舰店">
                            爱迪蒙托家居旗舰店</a>
                    </div>


                    </dt>
                    <dd class="container">
                        <div class="pic">
                            <a href="javascript:void(0)">
                                <img src="img/order_pic.jpg" alt="">
                            </a>
                        </div>
                        <div class="desc">
                            <p><a href="javascript:void(0)">北欧美式壁灯铁艺简约现代灯具楼梯背景墙床头
                                灯过道灯卧室客厅</a></p>
                            <span>欧式花，普通机械锁，黄铜材质</span>
                            <div class="price"><em>￥<strong>366.00</strong></em></div>
                            <i class="num">&times;1</i>
                        </div>
                    </dd>
                </dl>
                <div class="clear"></div>
                <div class="order_info">
                    <ul class="container">
                        <li onclick="showSendWay(2)">配送方式<span>快递费：￥10.00</span></li>
                        <li onclick="showCoupons(2)">店铺优惠<span>店铺优惠：满300-5</span></li>
                        <li>留言备注 <input type="text" placeholder="您的要求或者建议"></li>
                    </ul>
                    <h3>
                        共1件商品   小计：
                        <div class="price"><em>￥<strong>326.00</strong></em></div>
                    </h3>
                </div>
                <div class="coupon">
                    <div class="container">
                        可使用668积分抵￥6.68
                        <input type="checkbox" checked>
                    </div>
                </div>


                <!--优惠券-->
                <div class="mask coupon_avail">
                    <div class="coupon_info">
                        <i></i>
                        <div class="coupon_list container">

                            <header>
                               <h3>宜家家居专营店可使用优惠券</h3>
                                <p>最多使用一张优惠券</p>
                            </header>
                            <a href="javascript:void(0)">
                                <div class="value">
                                    <h2><span>￥</span>250 <span>满1999可用</span></h2>

                                </div>
                                <div class="info">

                                   <p><span>仅可购买宜家家居店铺商品使用</span></p>
                                    <p><span>使用期限：2016.11.10-2016.11.20</span></p>
                                </div>
                                <input type="radio" name="coupon" value="" id="coupon_1"><label for="coupon_1" >立即使用</label>

                            </a>
                            <a href="javascript:void(0)">
                                <div class="value">
                                    <h2><span>￥</span>250 <span>满1999可用</span></h2>

                                </div>
                                <div class="info">

                                    <p><span>仅可购买宜家家居店铺商品使用</span></p>
                                    <p><span>使用期限：2016.11.10-2016.11.20</span></p>
                                </div>
                                <input type="radio" name="coupon" value="" id="coupon_2" ><label for="coupon_2" >立即使用</label>
                            </a>
                            <a href="javascript:void(0)">
                                <div class="value">
                                    <h2><span>￥</span>250 <span>满1999可用</span></h2>

                                </div>
                                <div class="info">

                                    <p><span>仅可购买宜家家居店铺商品使用</span></p>
                                    <p><span>使用期限：2016.11.10-2016.11.20</span></p>
                                </div>
                                <input type="radio" name="coupon" value="" id="coupon_3" ><label for="coupon_3" >立即使用</label>
                            </a>



                        </div>

                    </div>
                </div>

                <!--配送方式-->
                <div class="mask send_way">
                    <div class="send_info">
                        <i></i>
                        <div class="container">
                            <header>
                                <h3>配送方式</h3>
                            </header>
                            <ul class="way_list">
                                <li>
                                    <label for="way_1">快递费￥10.00
                                    </label>
                                    <input type="checkbox" id="way_1">
                                </li>
                            </ul>
                        </div>




                        </div>

                    </div>
                </div>


                <!--结算-->
                <div class="settle_area">
                    合计: <div class="price"><em>￥<strong>15966.00</strong></em></div>
                    <input type="submit" value="立即下单">
                </div>
            </form>

        </div>

    </section>

</body>
<script src="js/jquery.js"></script>
<script>
    $(function(){
        $(".coupon_avail input").change(function () {
            var $parent=$(this).parent("a");
            $parent.removeClass("grey").siblings("a").addClass("grey");
        });
        $(".mask i").on("click",function () {
            $(this).parents(".mask").hide();
        });
    });
    function showCoupons(id) {
        $(".coupon_avail").show();
    }
    function showSendWay(id){
        $(".send_way").show();
    }
</script>
</html>